<template>
  <div class="app-container">
    <div class="bg-blue-100">
      <div class="px-24 py-16 text-white flex justify-between aling-center items-center">
        <div class="w-40 flex justify-start">
          <router-link   :to="previousPage" ><i
              class="el-icon-back larger-icon"></i></router-link>
        </div>
        <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight400__4Oy12 text-white"
          data-testid="page-title">
          <span class="w_DY w_Da w_De text-white">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">追踪</font>
            </font>
          </span>
        </p>
        <div class="w-40 flex justify-end">
          <i class="el-icon-close larger-icon" @click="iconClose"></i>
        </div>
      </div>
    </div>
    <div style="background-color:#f9f9f9;min-height: 82vh;">
      <div class="track-title">
        <h2>货运编号:{{ this.shipmentData.shipmentId }}</h2>
        <p>发货至: {{ this.shipmentData.shipFcName }}, {{ this.shipmentData.shipAddressLine }},
          {{ this.shipmentData.shipCity }}, {{ this.shipmentData.shipStateCode }}, {{
            this.shipmentData.shipPostalCode
          }}</p>
      </div>
      <div class="DOe5g">
        <div class="qjd7T">
          <div class="tab-order">
            <el-tabs v-model="activeName">
              <el-tab-pane label="追踪货运" name="trackShipment">
                <!-- 设置货运追踪 -->
                <div class="track-content" v-show="this.shipmentData.carrierName == null">
                  <div>
                    <p style="font-weight: 800;">添加跟踪号</p>
                    <p>输入跟踪号即可查看承运人的实时更新，例如当前位置和预计交货时间。</p>
                  </div>
                  <div class="top30">
                    <p style="font-weight: 800;">承运商名称</p>
                    <el-select v-model="trackData.carrierName" slot="prepend" placeholder="" class="track-select-input">
                      <el-option label="" value=""></el-option>
                      <el-option label="USPS" value="USPS"></el-option>
                      <el-option label="FedEx" value="FedEx"></el-option>
                      <el-option label="UPS" value="UPS"></el-option>
                      <el-option label="DHL" value="DHL"></el-option>
                      <el-option label="DHL Express" value="DHL Express"></el-option>
                      <el-option label="Laser Ship" value="Laser Ship"></el-option>
                      <el-option label="Others" value="Others"></el-option>
                    </el-select>
                  </div>
                  <div v-show="trackData.carrierName === 'Others'" class="top30">
                    <p>请指定</p>
                    <input style="height:36px;width:100%;line-height: 1.5rem;" v-model="trackData.specify">
                  </div>
                  <div class="top30">
                    <p style="font-weight: 800;">每行添加 1 个跟踪号。</p>
                    <textarea style="width:100%; height: 120px;" v-model="trackData.trackingNumbers"></textarea>
                  </div>
                  <div class="top30 dialog-footer" slot="footer">
                    <el-button class="custom-blue-btn" @click="validateAndAdd" v-hasPermi="['walmart:shipmentTrack:set']">添加</el-button>
                  </div>
                </div>
                <div class="track-content" v-show="this.shipmentData.carrierName != null">
                  <div class="top30">
                    <p style="font-weight: 800; display: inline;">Carrier: </p>
                    <p style="display: inline;">{{ this.shipmentData.carrierName }}</p>
                  </div>
                  <div class="top30">
                    <p style="font-weight: 800; display: inline;">Tracking number: </p>
                    <p style="display: inline;">{{ this.shipmentData.trackingNo }}</p>
                  </div>
                  <div class="top30">
                    <p style="font-weight: 800; display: inline;">Actual delivery: </p>
                    <p style="display: inline;">{{ this.shipmentData.actualDeliveryDate }}</p>
                  </div>

                </div>
              </el-tab-pane>
              <el-tab-pane label="追踪项目" name="trackItems">
                <!-- 物品列表内容 -->
                <div class="top30 track-content">
                  <span style="font-weight: 800; font-size:16px;display: inline;">发货数量：</span>
                  <span style="display: inline;font-size:16px">{{ shipmentItemData.length }} 件 / {{ totalItemQty }}
                    个</span>
                </div>
                <div class="items-list top20">
                  <el-table :data="shipmentItemData">
                    <el-table-column label="产品名称" align="center" prop="imgName" width="350" fixed>
                      <template slot-scope="scope">
                        <div class="item-container" style="display: flex; align-items: center;gap: 8px;">
                          <image-preview v-if="scope.row.imgName" :src="scope.row.imgName" :width="50" :height="50" />
                          <i v-else class="no-image-icon">
                            <image-preview :src="scope.row.imageUrl" :width="50" :height="50" />
                          </i>
                          <el-popover placement="top-start" title="Item Name" width="600" trigger="hover"
                            :content="scope.row.productName">
                            <span slot="reference">{{ scope.row.productName.slice(0, 35)
                              }}<span v-if="scope.row.productName.length > 35">...</span></span>
                          </el-popover>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="SKU" prop="sku"></el-table-column>
                    <el-table-column label="发货数量" prop="itemQty"></el-table-column>
                    <el-table-column label="接收数量" prop="receivedQty"></el-table-column>
                    <el-table-column label="损坏数量" prop="damagedQty"></el-table-column>
                    <el-table-column label="填充率" prop="fillRate">
                      <template slot-scope="scope">
                        {{ ((scope.row.receivedQty / scope.row.itemQty) * 100).toFixed(2) }}%
                      </template>
                    </el-table-column>
                    <el-table-column label="已开始接收" prop="receivingStarted"></el-table-column>
                    <el-table-column label="问题" prop="issue"></el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  setShipmentTracking,
  getShipmentItem,
} from "@/api/walmart/shipment";
export default {
  dicts: ["add_to_order"],
  data() {
    return {
      activeName: 'trackShipment',
      shipmentData: [],
      carrier: "",
      trackData: {
        shipmentId: '',
        carrierName: '',
        trackingNumbers: '',
        authId: ''
      },
      shipmentItemData: [],
      shipmentItemQury: {
        shipmentId: '',
      },
      previousPage: localStorage.getItem("previousPage") || "/sale/walmart/walmartWFS/shipments" // 如果没有保存的路径，跳转到默认路径
    }
  },
  mounted() {
    const itemsData = localStorage.getItem("shipmentData");
    this.shipmentData = JSON.parse(itemsData);
    this.getShipmentItem();
  },
  created() {
  },
  computed: {
    totalItemQty() {
      return this.shipmentItemData.reduce((total, item) => total + item.itemQty, 0);
    }
  },
  methods: {
    iconClose() {
      this.$store.dispatch("tagsView/delView", this.$route);
      // 从 localStorage 中读取保存的原始页面路径
      const previousPage = localStorage.getItem("previousPage");
      // 如果有保存的路径，则跳转回原来的页面
      if (previousPage) {
        this.$router.replace(previousPage);
        // 清除保存的路径
        localStorage.removeItem("previousPage");
      } else {
        // 如果没有保存的路径，则跳转到默认的页面
        this.$router.replace({
          path: "/sale/walmart/walmartWFS/shipments",
        });
      }// 关闭之后要返回的页面
    },
    iconCloseReflush() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/sale/walmart/walmartWFS/shipments",
        query: { page: 1 }
      }); // 关闭之后要返回的页面
    },
    validateAndAdd() {
      // 校验carrierName
      if (!this.trackData.carrierName) {
        this.$message.error('承运商名称不能为空');
        return;
      }
      // 校验trackingNumbers
      if (!this.trackData.trackingNumbers) {
        this.$message.error('跟踪号不能为空');
        return;
      }
      // 当carrierName为Others时，校验specify
      if (this.trackData.carrierName === 'Others' && !this.trackData.specify) {
        this.$message.error('请指定承运商名称');
        return;
      }

      // 如果所有校验通过，执行添加逻辑
      this.addTrackingInfo();
    },
    addTrackingInfo() {
      const carrierName = this.trackData.carrierName === 'Others' ? this.trackData.specify : this.trackData.carrierName;
      const trackingNumbersArray = this.trackData.trackingNumbers.split('\n').map(item => item.trim()).filter(item => item);
      const data = {
        shipmentId: this.shipmentData.shipmentId,
        carrierName: carrierName,
        trackingNumbers: trackingNumbersArray,
        authId: this.shipmentData.authId
      };
      setShipmentTracking(data).then((response) => {
        // 在这里执行添加逻辑，比如调用API，或者处理数据
        this.$message.success('设置货运追踪成功!');
        setTimeout(() => {
          this.iconCloseReflush();
        }, 500); // 1000毫秒 = 1秒
      });
    },
    //获取货件明细
    getShipmentItem() {
      this.shipmentItemQury.shipmentId = this.shipmentData.shipmentId;
      getShipmentItem(this.shipmentItemQury).then((response) => {
        this.shipmentItemData = response.rows;
      });
    }
  }
};
</script>

<style>
.app-container {
  background-color: white;
  font-family: Arial, sans-serif;
}

.el-dialog__body {
  padding: 5px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

.larger-icon {
  font-size: 24px;
}

.input-with-selects {
  width: 950px;
}

.bg-blue-100,
.bg-blue-110 {
  --tw-bg-opacity: 1 !important;
}

.bg-blue-100 {
  background-color: rgba(0, 113, 220, var(--tw-bg-opacity)) !important;
}

.text-white {
  color: #fff !important;
}

.px-24 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.py-16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.justify-between {
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.w-40 {
  width: 40px !important;
}

.justify-start {
  -webkit-box-pack: start !important;
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.Body-module_weight400__4Oy12 {
  font-weight: 400;
}

.Body-module_body1__B5yP7 {
  font-size: 16px;
  line-height: 24px;
}

.Body-module_body__eiCkB {
  color: #2e2f32;
  font-family: BogleWeb, MyriadPro, Helvetica Neue, Helvetica, Arial, sans-serif;
  margin-bottom: 0;
  margin-top: 0;
}

.w_De {
  font-weight: 700;
}

.w_Da,
.w_Db {
  line-height: 1.5rem;
}

.w_Da {
  font-size: 1.125rem;
}

.w_DY {
  color: #2e2f32;
  font-family: Bogle, Helvetica Neue, Helvetica, Arial, sans-serif;
  margin-bottom: 0;
  margin-top: 0;
}

.steps-container {
  display: flex;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

.w_T {
  display: flex;
  justify-content: space-between;
  /* 确保按钮分布在两边 */
  align-items: center;
}


.inset-x-0 {
  right: 0 !important;
  left: 0 !important;
}

.fixed {
  position: fixed !important;
  /* 固定位置 */
  width: 100% !important;
  /* 让它占满整个宽度 */
  bottom: 0 !important;
  /* 保证它固定在底部 */
  left: 0% !important;
  /* 对齐到左边 */
  background-color: white !important;
  /* 设置背景为白色 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
  /* 可选：为底部添加阴影，提高可见度 */
}

.bg-white {
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
}

.bg-white,
.bg-yellow-180 {
  --tw-bg-opacity: 1 !important;
}

.justify-end {
  -webkit-box-pack: end !important;
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 20px;
}

.track-title {
  text-align: center;
  /* 使内容居中 */
  padding-top: 20px;
  /* 增加标题上方的内边距 */
  /* 增加标题下方的内边距 */
}

.track-title h2 {
  font-size: 24px;
  /* 增大标题字体 */
  margin: 0;
  /* 去除标题的外边距 */
  font-weight: 600;
  /* 加粗标题 */
}

.track-title p {
  font-size: 14px;
  /* 增大段落字体 */
  color: #666;
  /* 设置文字颜色 */
  margin-top: 10px;
  /* 段落与标题之间的间距 */
}

.tab-order {
  font-size: 18px;
}

.DOe5g {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  position: static;
  background: #fff;
  -webkit-box-shadow: 0 0 2.5px 2.5px rgb(0 0 0 / 8%);
  box-shadow: 0 0 2.5px 2.5px rgb(0 0 0 / 8%);
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  margin: 0;
  border-radius: 8px;
  margin: 0 auto;
  /* 配合固定宽度自动居中 */
  width: 90%;
  display: flex;
  /* 使用 flex 布局 */
  justify-content: center;
  padding: .5rem .75rem
    /* 水平居中子元素 */
}

.qjd7T {
  width: 100%;
  min-height: 35vh;
}

.el-tabs__item {
  font-size: 16px;
  /* 默认字体大小变大 */
}

.el-tabs__item.is-active {
  font-weight: bold;
  color: black;
}

.track-content {
  margin: 20px;
}

.track-content p {
  font-size: 14px;
}

.track-select-input {
  width: 100%;
}

.top30 {
  margin-top: 30px;
}

.top20 {
  margin-top: 20px;
}

/* 深度样式覆盖 */
.custom-blue-btn {
  background: #278ef5 !important;
  color: white !important;
  border-radius: 20px !important;
  transition: all 0.3s;
}

/* 悬停效果增强 */
.custom-blue-btn:hover {
  background: #057af8 !important;
  transform: scale(1.05);
}

/* 激活状态 */
.custom-blue-btn:active {
  background: #2a6cad !important;
}

.w_EN {
  font-size: .875rem;
  line-height: 1.5rem;
}
</style>
